<template>
  <div>
    <!--面包屑模块-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 10px">
      <el-breadcrumb-item :to="{ path: '/manage/' + this.id }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>视频教学</el-breadcrumb-item>
      <el-breadcrumb-item>课程目录</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <div class="course-header">
        <h2>深度学习课程（共21讲）</h2>
        <div v-if="userInfo.role === 0 || userInfo.role === 1">
          <el-button type="primary" size="small" @click="addCourseDialogVisible = true">
            <i class="el-icon-plus"></i> 添加课程
          </el-button>
          <el-button type="success" size="small" @click="addVideoDialogVisible = true">
            <i class="el-icon-video-camera"></i> 添加视频
          </el-button>
        </div>
      </div>

      <div class="course-container">
        <!-- 左侧目录树 -->
        <div class="course-tree">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            size="small"
            prefix-icon="el-icon-search">
          </el-input>
          
          <el-tree
            class="filter-tree"
            :data="courseTree"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span :class="data.isVideo ? 'video-node' : 'folder-node'">
                <i :class="data.isVideo ? 'el-icon-video-play' : 'el-icon-folder'"></i>
                {{ node.label }}
              </span>
              <span v-if="data.isVideo && (userInfo.role === 0 || userInfo.role === 1)">
                <el-button
                  type="text"
                  size="mini"
                  @click.stop="removeVideo(data)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
        
        <!-- 右侧内容区 -->
        <div class="course-content">
          <div v-if="selectedNode && selectedNode.isVideo" class="video-detail">
            <h3>{{ selectedNode.label }}</h3>
            <p class="video-info">
              <span>时长: {{ selectedNode.duration }}</span>
              <span>上传日期: {{ selectedNode.uploadDate }}</span>
              <span>上传者: {{ selectedNode.uploadBy }}</span>
            </p>
            <p class="video-description">{{ selectedNode.description }}</p>
            <div class="video-actions">
              <el-button type="primary" @click="watchVideo(selectedNode)">
                <i class="el-icon-video-play"></i> 观看视频
              </el-button>
              <el-button type="info" @click="downloadVideo(selectedNode)" v-if="selectedNode.downloadable">
                <i class="el-icon-download"></i> 下载资料
              </el-button>
            </div>
          </div>
          <div v-else-if="selectedNode" class="course-section">
            <h3>{{ selectedNode.label }}</h3>
            <p v-if="selectedNode.description">{{ selectedNode.description }}</p>
            <el-divider></el-divider>
            <div class="section-contents">
              <h4>本单元内容：</h4>
              <ul v-if="selectedNode.children && selectedNode.children.length">
                <li v-for="child in selectedNode.children" :key="child.id">
                  <i :class="child.isVideo ? 'el-icon-video-play' : 'el-icon-folder'"></i>
                  <a href="javascript:;" @click="handleNodeClick(child)">{{ child.label }}</a>
                </li>
              </ul>
              <el-empty v-else description="暂无内容"></el-empty>
            </div>
          </div>
          <div v-else class="course-welcome">
            <h3>欢迎学习深度学习课程</h3>
            <p>请从左侧目录选择要学习的内容</p>
            <el-divider></el-divider>
            <h4>课程简介：</h4>
            <p>本课程将系统讲解深度学习的基础理论和实践应用，包括神经网络基础、卷积神经网络、循环神经网络、生成对抗网络等内容，帮助学生掌握深度学习的核心技术和最新进展。</p>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 添加视频对话框 -->
    <el-dialog title="添加视频" :visible.sync="addVideoDialogVisible" width="50%" @close="resetAddForm">
      <el-form :model="addVideoForm" :rules="addVideoRules" ref="addVideoFormRef" label-width="100px">
        <el-form-item label="所属章节" prop="parentId">
          <el-cascader
            v-model="addVideoForm.parentId"
            :options="courseTreeForSelect"
            :props="{ checkStrictly: true, value: 'id', label: 'label' }"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="视频标题" prop="title">
          <el-input v-model="addVideoForm.title"></el-input>
        </el-form-item>
        <el-form-item label="视频描述" prop="description">
          <el-input type="textarea" v-model="addVideoForm.description"></el-input>
        </el-form-item>
        <el-form-item label="视频文件" prop="videoFile">
          <el-upload
            class="upload-demo"
            action="http://localhost:4041/video/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传mp4/avi文件，且不超过500MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVideoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddVideoForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加课程对话框 -->
    <el-dialog title="添加课程或章节" :visible.sync="addCourseDialogVisible" width="50%" @close="resetCourseForm">
      <el-form :model="addCourseForm" :rules="addCourseRules" ref="addCourseFormRef" label-width="100px">
        <el-form-item label="父级节点" prop="parentId">
          <el-cascader
            v-model="addCourseForm.parentId"
            :options="courseTreeForSelect"
            :props="{ checkStrictly: true, value: 'id', label: 'label' }"
            clearable>
          </el-cascader>
          <div class="el-form-item-tip">不选择则添加为一级节点</div>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="addCourseForm.title"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="addCourseForm.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCourseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddCourseForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'VideoList',
  data() {
    return {
      id: null,
      userInfo: {
        id: '',
        role: ''
      },
      // 过滤文本
      filterText: '',
      // 目录树结构
      courseTree: [
        {
          id: 'chapter1',
          label: '第1章  绪论与PyTorch基础',
          description: '本章介绍人工智能、深度学习基础概念及PyTorch框架',
          children: [
            {
              id: 'video1_1',
              label: '1.1  人工智能与神经网络',
              description: '介绍人工智能和神经网络的基本概念',
              uploadDate: '2025-03-01',
              duration: '45:30',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/ai_neural_networks.mp4',
              isVideo: true
            },
            {
              id: 'video1_2',
              label: '1.2  深度学习',
              description: '介绍深度学习的基本概念和应用场景',
              uploadDate: '2025-03-03',
              duration: '42:15',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/deep_learning_intro.mp4',
              isVideo: true
            },
            {
              id: 'video1_3',
              label: '1.3  建立PyTorch的开发环境',
              description: '指导如何搭建PyTorch开发环境',
              uploadDate: '2025-03-05',
              duration: '38:45',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/pytorch_setup.mp4',
              isVideo: true
            },
            {
              id: 'video1_4',
              label: '1.4  张量基础',
              description: '介绍PyTorch中张量的基本概念和操作',
              uploadDate: '2025-03-07',
              duration: '50:20',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/tensor_basics.mp4',
              isVideo: true
            },
            {
              id: 'video1_5',
              label: '1.5  初识PyTorch框架',
              description: '初步了解PyTorch框架的基本结构和特性',
              uploadDate: '2025-03-09',
              duration: '47:30',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/pytorch_intro.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter2',
          label: '第2章  感知器——神经元',
          description: '本章详细讲解感知器的原理和激活函数',
          children: [
            {
              id: 'video2_1',
              label: '2.1  感知器的定义',
              description: '介绍感知器的基本定义和结构',
              uploadDate: '2025-03-11',
              duration: '43:25',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/perceptron_definition.mp4',
              isVideo: true
            },
            {
              id: 'video2_2',
              label: '2.2  激活函数',
              description: '讲解神经网络中常用的各种激活函数',
              uploadDate: '2025-03-13',
              duration: '51:40',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/activation_functions.mp4',
              isVideo: true
            },
            {
              id: 'video2_3',
              label: '2.3  感知器的训练',
              description: '介绍感知器的训练方法和过程',
              uploadDate: '2025-03-15',
              duration: '48:35',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/perceptron_training.mp4',
              isVideo: true
            },
            {
              id: 'video2_4',
              label: '2.4  使用PyTorch框架',
              description: '使用PyTorch实现感知器模型',
              uploadDate: '2025-03-17',
              duration: '55:10',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/pytorch_perceptron.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter3',
          label: '第3章  全连接神经网络',
          description: '本章介绍全连接神经网络的构建和训练',
          children: [
            {
              id: 'video3_1',
              label: '3.1  构建一个简单的全连接神经网络——解决二分类问题',
              description: '通过解决二分类问题介绍全连接神经网络的基本构建方法',
              uploadDate: '2025-03-19',
              duration: '52:45',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/fcnn_binary_classification.mp4',
              isVideo: true
            },
            {
              id: 'video3_2',
              label: '3.2  全连接神经网络的构造方法',
              description: '详细讲解全连接神经网络的构造方法',
              uploadDate: '2025-03-21',
              duration: '49:30',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/fcnn_construction.mp4',
              isVideo: true
            },
            {
              id: 'video3_3',
              label: '3.3  几种主流的损失函数',
              description: '介绍深度学习中常用的损失函数',
              uploadDate: '2025-03-23',
              duration: '44:15',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/loss_functions.mp4',
              isVideo: true
            },
            {
              id: 'video3_4',
              label: '3.4  网络模型的训练与测试',
              description: '讲解神经网络模型的训练和测试方法',
              uploadDate: '2025-03-25',
              duration: '56:20',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/model_training_testing.mp4',
              isVideo: true
            },
            {
              id: 'video3_5',
              label: '3.5  正向计算和反向梯度传播的理论分析',
              description: '深入分析正向计算和反向梯度传播的理论基础',
              uploadDate: '2025-03-27',
              duration: '58:35',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/forward_backward_propagation.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter4',
          label: '第4章  卷积神经网络',
          description: '本章介绍卷积神经网络的原理和应用',
          children: [
            {
              id: 'video4_1',
              label: '4.1  一个简单的卷积神经网络——手写数字识别',
              description: '通过手写数字识别任务介绍卷积神经网络',
              uploadDate: '2025-03-29',
              duration: '53:40',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/cnn_mnist.mp4',
              isVideo: true
            },
            {
              id: 'video4_2',
              label: '4.2  卷积神经网络的主要操作',
              description: '讲解卷积、池化等CNN的主要操作',
              uploadDate: '2025-03-31',
              duration: '47:25',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/cnn_operations.mp4',
              isVideo: true
            },
            {
              id: 'video4_3',
              label: '4.3  卷积神经网络的设计方法',
              description: '介绍卷积神经网络的设计原则和方法',
              uploadDate: '2025-04-02',
              duration: '51:15',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/cnn_design.mp4',
              isVideo: true
            },
            {
              id: 'video4_4',
              label: '4.4  过拟合及其解决方法',
              description: '讨论CNN中的过拟合问题及解决方案',
              uploadDate: '2025-04-04',
              duration: '45:50',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/overfitting_solutions.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter5',
          label: '第5章  若干经典CNN预训练模型及其迁移方法',
          description: '本章介绍经典CNN模型及其迁移学习应用',
          children: [
            {
              id: 'video5_1',
              label: '5.1  一个使用VGG16的图像识别程序',
              description: '通过VGG16模型进行图像识别的实例',
              uploadDate: '2025-04-06',
              duration: '54:30',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/vgg16_image_recognition.mp4',
              isVideo: true
            },
            {
              id: 'video5_2',
              label: '5.2  经典卷积神经网络的结构',
              description: '深入讲解各种经典CNN模型的结构特点',
              uploadDate: '2025-04-08',
              duration: '59:45',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/classic_cnn_structures.mp4',
              isVideo: true
            },
            {
              id: 'video5_3',
              label: '5.3  预训练模型的迁移方法',
              description: '详细介绍预训练模型迁移学习的方法',
              uploadDate: '2025-04-10',
              duration: '52:20',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/transfer_learning.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter6',
          label: '第6章  深度卷积神经网络的应用案例',
          description: '本章介绍深度卷积神经网络在各领域的具体应用',
          children: [
            {
              id: 'video6_1',
              label: '6.1  人脸识别',
              description: '介绍CNN在人脸识别领域的应用',
              uploadDate: '2025-04-12',
              duration: '48:15',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/face_recognition.mp4',
              isVideo: true
            },
            {
              id: 'video6_2',
              label: '6.2  语义分割',
              description: '介绍CNN在语义分割领域的应用',
              uploadDate: '2025-04-14',
              duration: '53:25',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/semantic_segmentation.mp4',
              isVideo: true
            },
            {
              id: 'video6_3',
              label: '6.3  目标检测',
              description: '介绍CNN在目标检测领域的应用',
              uploadDate: '2025-04-16',
              duration: '55:35',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/object_detection.mp4',
              isVideo: true
            },
            {
              id: 'video6_4',
              label: '6.4  生成对抗网络',
              description: '介绍GAN的基本原理和应用',
              uploadDate: '2025-04-18',
              duration: '57:40',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/gan_intro.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter7',
          label: '第7章  循环神经网络',
          description: '本章介绍循环神经网络及其应用',
          children: [
            {
              id: 'video7_1',
              label: '7.1  一个简单的循环神经网络——航空旅客出行人数预测',
              description: '通过时间序列预测介绍RNN的基本应用',
              uploadDate: '2025-04-20',
              duration: '49:55',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/rnn_time_series.mp4',
              isVideo: true
            },
            {
              id: 'video7_3',
              label: '7.3  长短时记忆网络(LSTM)',
              description: '介绍LSTM的结构和原理',
              uploadDate: '2025-04-22',
              duration: '54:10',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/lstm_networks.mp4',
              isVideo: true
            },
            {
              id: 'video7_4',
              label: '7.4  文本的表示207',
              description: '讲解NLP中文本表示的方法',
              uploadDate: '2025-04-24',
              duration: '46:30',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/text_representation.mp4',
              isVideo: true
            },
            {
              id: 'video7_5',
              label: '7.5  基于LSTM的文本分类',
              description: '介绍使用LSTM进行文本分类的方法',
              uploadDate: '2025-04-26',
              duration: '52:45',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/lstm_text_classification.mp4',
              isVideo: true
            },
            {
              id: 'video7_6',
              label: '7.6  基于LSTM的文本生成',
              description: '介绍使用LSTM进行文本生成的方法',
              uploadDate: '2025-04-28',
              duration: '50:15',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/lstm_text_generation.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter8',
          label: '第8章  基于预训练模型的自然语言处理',
          description: '本章介绍NLP中的预训练模型',
          children: [
            {
              id: 'video8_1',
              label: '8.1  Seq2Seq结构与注意力机制',
              description: '讲解序列到序列模型和注意力机制',
              uploadDate: '2025-04-30',
              duration: '56:20',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/seq2seq_attention.mp4',
              isVideo: true
            },
            {
              id: 'video8_2',
              label: '8.2  Transformer及其在NLP中的应用',
              description: '介绍Transformer模型及其NLP应用',
              uploadDate: '2025-05-02',
              duration: '58:35',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/transformer_nlp.mp4',
              isVideo: true
            },
            {
              id: 'video8_3',
              label: '8.3  BERT及其在NLP中的应用',
              description: '介绍BERT模型及其NLP应用',
              uploadDate: '2025-05-04',
              duration: '59:45',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/bert_applications.mp4',
              isVideo: true
            },
            {
              id: 'video8_4',
              label: '8.4  基于GPT的文本生成',
              description: '讲解使用GPT模型进行文本生成',
              uploadDate: '2025-05-06',
              duration: '54:30',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/gpt_text_generation.mp4',
              isVideo: true
            },
            {
              id: 'video8_5',
              label: '8.5  视觉Transformer(ViT)',
              description: '介绍ViT模型及其在计算机视觉中的应用',
              uploadDate: '2025-05-08',
              duration: '53:15',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/vision_transformer.mp4',
              isVideo: true
            },
            {
              id: 'video8_6',
              label: '8.6  ChatGPT及其使用方法',
              description: '介绍ChatGPT及其实际应用',
              uploadDate: '2025-05-10',
              duration: '55:40',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/chatgpt_usage.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter9',
          label: '第9章  面向解释的深度神经网络可视化方法',
          description: '本章介绍深度神经网络的可视化和解释方法',
          children: [
            {
              id: 'video9_1',
              label: '9.1  CNN各网络层输出的可视化',
              description: '介绍CNN网络层输出的可视化技术',
              uploadDate: '2025-05-12',
              duration: '47:25',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/cnn_layer_visualization.mp4',
              isVideo: true
            },
            {
              id: 'video9_2',
              label: '9.2  CNN模型决策原因的可视化方法',
              description: '讲解CNN模型决策过程的可视化方法',
              uploadDate: '2025-05-14',
              duration: '51:50',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/cnn_decision_visualization.mp4',
              isVideo: true
            },
            {
              id: 'video9_3',
              label: '9.3  面向NLP任务的可视化方法',
              description: '介绍NLP模型的可视化和解释方法',
              uploadDate: '2025-05-16',
              duration: '49:30',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/nlp_visualization.mp4',
              isVideo: true
            }
          ]
        },
        {
          id: 'chapter10',
          label: '第10章  多模态学习与多模态数据分类',
          description: '本章介绍多模态学习的基本概念和应用',
          children: [
            {
              id: 'video10_1',
              label: '10.1  多模态学习',
              description: '介绍多模态学习的基本概念和方法',
              uploadDate: '2025-05-18',
              duration: '52:20',
              uploadBy: 'teacher001',
              url: 'https://example.com/videos/multimodal_learning.mp4',
              isVideo: true
            },
            {
              id: 'video10_2',
              label: '10.2  多模态数据分类',
              description: '讲解多模态数据分类的方法和技术',
              uploadDate: '2025-05-20',
              duration: '54:45',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/multimodal_classification.mp4',
              isVideo: true
            },
            {
              id: 'video10_3',
              label: '10.3  多模态数据分类案例',
              description: '通过实例演示多模态数据分类的应用',
              uploadDate: '2025-05-22',
              duration: '56:35',
              uploadBy: 'teacher002',
              url: 'https://example.com/videos/multimodal_case_studies.mp4',
              isVideo: true
            }
          ]
        }
      ],
      // 树形控件配置
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 当前选中的节点
      selectedNode: null,
      // 添加视频对话框
      addVideoDialogVisible: false,
      // 添加课程对话框
      addCourseDialogVisible: false,
      // 添加视频表单
      addVideoForm: {
        parentId: null,
        title: '',
        description: '',
        videoFile: null
      },
      // 添加课程表单
      addCourseForm: {
        parentId: null,
        title: '',
        description: ''
      },
      // 添加视频表单验证规则
      addVideoRules: {
        parentId: [
          { required: true, message: '请选择所属章节', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入视频标题', trigger: 'blur' },
          { min: 2, max: 50, message: '标题长度在2到50个字符之间', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入视频描述', trigger: 'blur' }
        ]
      },
      // 添加课程表单验证规则
      addCourseRules: {
        title: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
          { min: 2, max: 50, message: '名称长度在2到50个字符之间', trigger: 'blur' }
        ]
      },
      fileList: []
    }
  },
  computed: {
    // 处理树形数据，用于级联选择器
    courseTreeForSelect() {
      const copyTree = (tree) => {
        return tree.map(node => {
          const newNode = {
            id: node.id,
            label: node.label,
            value: node.id
          }
          
          if (node.children && node.children.length) {
            // 只包含非视频节点，视频不能作为父节点
            const nonVideoChildren = node.children.filter(child => !child.isVideo)
            if (nonVideoChildren.length) {
              newNode.children = copyTree(nonVideoChildren)
            }
          }
          
          return newNode
        })
      }
      
      return copyTree(this.courseTree)
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    // 初始化用户ID和角色
    this.id = parseInt(this.$route.params.id)
    this.userInfo.id = window.sessionStorage.getItem('userId')
    this.userInfo.role = window.sessionStorage.getItem('userRole')
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.toLowerCase().indexOf(value.toLowerCase()) !== -1
    },
    // 点击节点
    handleNodeClick(data) {
      this.selectedNode = data
    },
    // 观看视频
    watchVideo(video) {
      // 将视频信息存储到 sessionStorage
      window.sessionStorage.setItem('currentVideo', JSON.stringify(video))
      // 跳转到观看视频页面
      this.$router.push('/manage/' + this.id + '/video/watch')
    },
    // 下载视频资料
    downloadVideo(video) {
      // 实际项目中应该请求服务器端获取下载链接
      this.$message.success('开始下载资料，请等待...')
      // 模拟下载行为
      setTimeout(() => {
        this.$message.info('此功能需要连接到实际的后端服务')
      }, 1500)
    },
    // 删除视频
    removeVideo(video) {
      this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除操作
        this.$message.success('删除视频成功')
        
        // 从树形结构中删除节点
        const removeNodeFromTree = (tree, nodeId) => {
          for (let i = 0; i < tree.length; i++) {
            if (tree[i].id === nodeId) {
              tree.splice(i, 1)
              return true
            }
            
            if (tree[i].children && tree[i].children.length) {
              if (removeNodeFromTree(tree[i].children, nodeId)) {
                return true
              }
            }
          }
          
          return false
        }
        
        removeNodeFromTree(this.courseTree, video.id)
        this.selectedNode = null
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 重置添加视频表单
    resetAddForm() {
      this.$refs.addVideoFormRef.resetFields()
      this.fileList = []
    },
    // 重置添加课程表单
    resetCourseForm() {
      this.$refs.addCourseFormRef.resetFields()
    },
    // 提交添加视频表单
    submitAddVideoForm() {
      this.$refs.addVideoFormRef.validate(valid => {
        if (!valid) return
        
        // 模拟添加成功
        this.$message.success('添加视频成功')
        this.addVideoDialogVisible = false
        
        // 在树形结构中添加新节点
        const addNodeToTree = (tree, parentId, newNode) => {
          for (let i = 0; i < tree.length; i++) {
            if (tree[i].id === parentId) {
              if (!tree[i].children) {
                tree[i].children = []
              }
              tree[i].children.push(newNode)
              return true
            }
            
            if (tree[i].children && tree[i].children.length) {
              if (addNodeToTree(tree[i].children, parentId, newNode)) {
                return true
              }
            }
          }
          
          return false
        }
        
        // 创建新节点
        const newVideo = {
          id: 'video_' + Date.now(),
          label: this.addVideoForm.title,
          description: this.addVideoForm.description,
          uploadDate: new Date().toISOString().split('T')[0],
          duration: '30:00', // 这里应该是从视频文件中提取的时长
          uploadBy: this.userInfo.id,
          url: 'https://example.com/videos/new_video.mp4',
          isVideo: true
        }
        
        // 添加到树形结构
        if (this.addVideoForm.parentId && this.addVideoForm.parentId.length) {
          const parentId = this.addVideoForm.parentId[this.addVideoForm.parentId.length - 1]
          addNodeToTree(this.courseTree, parentId, newVideo)
        } else {
          // 如果没有选择父节点，添加到顶层
          this.courseTree.push(newVideo)
        }
      })
    },
    // 提交添加课程表单
    submitAddCourseForm() {
      this.$refs.addCourseFormRef.validate(valid => {
        if (!valid) return
        
        // 模拟添加成功
        this.$message.success('添加课程/章节成功')
        this.addCourseDialogVisible = false
        
        // 创建新节点
        const newCourse = {
          id: 'course_' + Date.now(),
          label: this.addCourseForm.title,
          description: this.addCourseForm.description,
          children: []
        }
        
        // 添加到树形结构
        if (this.addCourseForm.parentId && this.addCourseForm.parentId.length) {
          // 添加为子节点
          const addNodeToTree = (tree, parentId, newNode) => {
            for (let i = 0; i < tree.length; i++) {
              if (tree[i].id === parentId) {
                if (!tree[i].children) {
                  tree[i].children = []
                }
                tree[i].children.push(newNode)
                return true
              }
              
              if (tree[i].children && tree[i].children.length) {
                if (addNodeToTree(tree[i].children, parentId, newNode)) {
                  return true
                }
              }
            }
            
            return false
          }
          
          const parentId = this.addCourseForm.parentId[this.addCourseForm.parentId.length - 1]
          addNodeToTree(this.courseTree, parentId, newCourse)
        } else {
          // 添加到顶层
          this.courseTree.push(newCourse)
        }
      })
    },
    // 上传相关方法
    handleRemove(file, fileList) {
      this.fileList = fileList
      this.addVideoForm.videoFile = null
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning('最多只能上传1个视频文件')
    },
    beforeUpload(file) {
      const isMP4 = file.type === 'video/mp4'
      const isAVI = file.type === 'video/x-msvideo'
      const isLt500M = file.size / 1024 / 1024 < 500
      
      if (!isMP4 && !isAVI) {
        this.$message.error('上传视频只能是 MP4/AVI 格式!')
        return false
      }
      if (!isLt500M) {
        this.$message.error('上传视频大小不能超过 500MB!')
        return false
      }
      
      this.addVideoForm.videoFile = file
      return false // 阻止自动上传
    }
  }
}
</script>

<style scoped>
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.course-header h2 {
  margin: 0;
}

.course-container {
  display: flex;
  min-height: 600px;
  margin-top: 20px;
}

.course-tree {
  width: 360px;
  border-right: 1px solid #ebeef5;
  padding-right: 20px;
}

.filter-tree {
  margin-top: 15px;
}

.course-content {
  flex: 1;
  padding-left: 20px;
}

.video-detail, .course-section, .course-welcome {
  padding: 10px;
}

.video-info {
  color: #909399;
  margin: 10px 0;
}

.video-info span {
  margin-right: 15px;
}

.video-description {
  margin-bottom: 20px;
}

.video-actions {
  margin-top: 20px;
}

.section-contents {
  margin-top: 15px;
}

.section-contents ul {
  padding-left: 20px;
}

.section-contents li {
  margin-bottom: 10px;
}

.section-contents li a {
  color: #409EFF;
  text-decoration: none;
}

.section-contents li a:hover {
  text-decoration: underline;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.video-node {
  color: #409EFF;
}

.folder-node {
  color: #606266;
}

.el-form-item-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}
</style>
